CodeVerse — Practice coding, build confidence

Tiny, fast, and modern practice environment. Try challenges, run your code in the browser, and climb the leaderboard.

Fast edits
Instant HTML/CSS/JS preview.
Score & Leaderboard
Track progress and compare with peers.
Admin tools
Add and curate challenges (demo).

Your Progress

Not logged in

0
Total Score
#—
Rank

Quick Challenges

© CodeVerse — Demo frontend • Save as index.html
' }, { id: 'c3', title:'DOM Color Changer (JS)', difficulty:'medium', type:'html', desc:'Make a button that toggles background color', starter: '' } ]; localStorage.setItem('cv_challenges', JSON.stringify(base)); } // seed leaderboard const lb = JSON.parse(localStorage.getItem('cv_leaderboard') || 'null'); if(!lb) localStorage.setItem('cv_leaderboard', JSON.stringify([])); } seed(); // Load challenges from storage function loadChallenges() { state.challenges = JSON.parse(localStorage.getItem('cv_challenges') || '[]'); } loadChallenges(); // AOS init document.addEventListener('DOMContentLoaded', ()=> { AOS.init({duration:600,once:true}); renderChallenges(); populateChallengeSelect(); renderFeatured(); renderLeaderboard(); updateProfileUI(); // GSAP entrance gsap.from('.card', {y:20,opacity:0,duration:0.6,stagger:0.05}); }); // SPA navigation function showSection(name) { state.active = name; document.querySelectorAll('main section').forEach(s=>s.style.display='none'); const el = document.getElementById(name); if(el) el.style.display='block'; if(name === 'challenges') renderChallenges(); if(name === 'editor') populateChallengeSelect(); if(name === 'leaderboard') renderLeaderboard(); window.scrollTo({top:0,behavior:'smooth'}); } function goHome(){ showSection('home') } // Render challenges function renderChallenges(){ loadChallenges(); const grid = document.getElementById('challengesGrid'); grid.innerHTML = ''; const q = (document.getElementById('search')?.value || '').toLowerCase(); const f = document.getElementById('filter')?.value || 'all'; const arr = state.challenges.filter(c=>{ if(f !== 'all' && c.difficulty !== f) return false; if(q && !(c.title.toLowerCase().includes(q) || c.desc.toLowerCase().includes(q))) return false; return true; }); if(arr.length===0) grid.innerHTML = '
No challenges found
'; arr.forEach(ch=>{ const card = document.createElement('div'); card.className='card'; card.innerHTML = `
${escapeHtml(ch.title)}
${escapeHtml(ch.desc)}
${ch.difficulty.toUpperCase()}
${ch.type}